import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';

import {
    GridComponent,
    DatasetComponent,
    LegendComponent
} from 'echarts/components';

echarts.use([
    GridComponent,
    TitleComponent,
    TooltipComponent,
    DatasetComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer, PieChart]);

const EChartsComponent = () => {
    const chartRef = useRef(null);
    const chartInstance = useRef(null); // 用于存储图表实例

    useEffect(() => {
        const chart = echarts.init(chartRef.current);

        // 初始化图表实例
        chartInstance.current = chart;

        const option = {
            backgroundColor: '#03171f',
            grid: {
                left: '8%',
                // right: '0%',
                bottom: '1%',
                top: '15%',
                containLabel: true
            },
            legend: {
                data: [
                    {
                        name: '药品',
                        itemStyle: {
                            color: '#33c2bb'
                        }
                    },
                    {
                        name: '医疗',
                        itemStyle: {
                            color: '#23b9ff'
                        }
                    }
                ],
                show: true,
                right: '52%',
                top: '0%',
                textStyle: {
                    color: '#fff',
                    fontSize: 15
                },
                itemGap: 30
            },
            xAxis: [
                {
                    show: false,
                    type: 'value',
                    max: 100,
                    min: 0
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    inverse: true,
                    axisLabel: {
                        show: true,
                        color: '#fff',
                        fontSize: 14,
                        formatter: (params) => {
                            const maxLength = 8;
                            let chart = '';
                            for (let i = 0; i < params.length; i++) {
                                chart += params.charAt(i);
                                if ((i + 1) % maxLength === 0 && i !== params.length - 1) {
                                    chart += '\n';
                                }
                            }
                            return chart;
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    data: ['青霉素类', '头孢素类', '氨基糖苷类', '四环素类', '硫铵类', '喹诺酮类', '硫铵类', '硝基呋喃类']
                },
                {
                    axisLabel: {
                        show: true,
                        formatter: function (params) {
                            return [
                                `{a|${params.split(',')[0]}%}`,
                                `{b|${params.split(',')[1]}%}`,
                            ];
                        },
                        rich: {
                            a: {
                                color: '#33c2bb',
                                fontSize: 12
                            },
                            b: {
                                color: '#23b9ff',
                                fontSize: 12
                            }
                        }
                    },
                    inverse: true,
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    data: [
                        [20, 50],
                        [30, 70],
                        [40, 80],
                        [90, 100],
                        [80, 85],
                        [54, 85],
                        [58, 88],
                        [78, 95],
                    ]
                }
            ],
            series: [
                {
                    name: '药品',
                    type: 'bar',
                    barWidth: 8,
                    data: [10, 30, 40, 90, 80, 54, 58, 78],
                    itemStyle: {
                        color: {
                            type: 'linear',
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#33c2bb'
                                },
                                {
                                    offset: 1,
                                    color: '#33c2bb'
                                }
                            ]
                        }
                    },
                    emphasis: {
                        disabled: true,
                        focus: 'none'
                    },
                    showBackground: true,
                    backgroundStyle: {
                        color: '#252b216b'
                    }
                },
                {
                    name: '医疗',
                    type: 'bar',
                    barWidth: 8,
                    data: [50, 70, 80, 100, 85, 85, 88, 95],
                    itemStyle: {
                        color: {
                            type: 'linear',
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#23b9ff'
                                },
                                {
                                    offset: 1,
                                    color: '#23b9ff'
                                }
                            ]
                        }
                    },
                    emphasis: {
                        disabled: true,
                        focus: 'none'
                    },
                    showBackground: true,
                    backgroundStyle: {
                        color: '#252b216b'
                    }
                },
                {
                    type: 'scatter',
                    emphasis: {
                        scale: false
                    },
                    symbol: 'rect',
                    itemStyle: {
                        barBorderRadius: [30, 0, 0, 30],
                        color: '#f39a04',
                        shadowColor: '#f39a04',
                        shadowBlur: 1,
                        borderWidth: 1,
                        opacity: 1
                    },
                    symbolSize: [4, 18], // 进度条白点的大小
                    z: 2,
                    // data: [10, 30, 40, 90],
                    // animationDelay: 500,
                    // symbolOffset: [-3, -11]
                },
                {
                    type: 'scatter',
                    symbol: 'rect',
                    itemStyle: {
                        barBorderRadius: [30, 0, 0, 30],
                        color: '#33c2bb',
                        shadowColor: '#33c2bb',
                        shadowBlur: 1,
                        borderWidth: 1,
                        opacity: 1
                    },
                    symbolSize: [4, 18], // 进度条白点的大小
                    z: 2,
                    // data: [50, 70, 80, 100],
                    // animationDelay: 500,
                    // symbolOffset: [-3, 11]
                }
            ]
        };
        chart.setOption(option);
        // 监听容器大小变化
        const resizeObserver = new ResizeObserver(() => {
            chart.resize();
        });
        resizeObserver.observe(chartRef.current);

        return () => {
            chart.dispose();
            resizeObserver.disconnect();
        };
    }, []);

    return <div ref={chartRef} style={{ width: '22vw', height: '15vw', maxWidth: '22vw', maxHeight: '15vw' }}></div>;
};

export default EChartsComponent;

